<template>
  <div class="performance-detail">

    <div class="performance-select-con">
      <div class="date-box">
        <div class="date-con">
          <img src="./left.png" class="pic1" @click="preMonth" onclick="return false"/>
          <datetime format="YYYY-MM" v-model="month" class="date-time" :end-date="endDate"
                    @on-confirm="onConfirm"></datetime>
          <div class="pic2-box" @click="nextMonth">
            <img src="./right.png" class="pic2" onclick="return false"/>
          </div>
        </div>
      </div>
    </div>

    <div class="performance-content">
      <div class="performance-total"><span class="total-text">总推广人数：{{performanceNum}}人</span></div>

      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="performance-item" v-for="(performance,index) in performanceList" :key="index">
          <span class="month-text">{{performance.month}}</span><span class="people">{{performance.num}}人</span>
        </div>
      </van-list>
    </div>

    <div class="empty-wrap" v-if="performanceList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">暂无相关记录~</div>
      </div>
    </div>

    <div class="work-mask_transparent-toast" v-if="showToast"></div>
  </div>
</template>

<script>
  import {formatDate, getNextMonth, getPreMonth, getUrlKey, getYearMonth} from "../../../config/util";
  import {Datetime} from 'vux';
  import {baseUrl} from "../../../config/env";

  export default {
    name: "performanceDetail",
    data() {
      return {
        month: getYearMonth(),
        endDate: '',
        performanceList: [],
        showToast: false,
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false,
        timer: null,
        performanceNum: 0,
        promotionId: getUrlKey("promotionId")?getUrlKey("promotionId"):'',
        role: getUrlKey("role"),
        userName: getUrlKey("userName"),
        userUrl: getUrlKey("userUrl"),
        tag: getUrlKey("tag"),//身份唯一标识
        tagId: getUrlKey("tagId")//登录标识
      }
    },
    created() {
      this.endDate = formatDate(new Date(), "yyyy-MM-dd");
    },
    methods: {
      onLoad() {
        if (!this.timer) {// 异步更新数据
          this.timer = setTimeout(() => {
            this.getPerformanceList();
            this.timer = null;
          }, 500)
        }
      },
      getPerformanceList() {//获取个人业绩
        this.showToast = true;
        this.axios.get(baseUrl + "/promotion/get_pro_detail?sgin=" + this.tagId + "&userId=" + this.promotionId + "&time=" + this.month + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let performanceObj = res.data;
          if (performanceObj.code == 0 && performanceObj.data != null) {
            this.performanceNum = performanceObj.data.num;
            if (performanceObj.data.list != null && performanceObj.data.list.length > 0) {
              this.performanceList = this.performanceList.concat(performanceObj.data.list);
              this.loading = false;
              this.currentPage++;
            } else {
              this.loading = false;
              if (this.performanceList.length >= performanceObj.data.list.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(performanceObj.msg, "middle");
          }
          this.showToast = false;
        }).catch(() => {
          this.showToast = false;
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      preMonth() {//上一月
        this.month = getPreMonth(this.month);
        this.initVanList();
        this.getPerformanceList(this.month);
      },
      nextMonth() {//下一月
        if (this.month == getYearMonth()) {
          return;
        }
        this.month = getNextMonth(this.month);
        this.initVanList();
        this.getPerformanceList(this.month);
      },
      onConfirm(value) {
        this.initVanList();
        this.getPerformanceList(value);
      },
      initVanList() {
        this.currentPage = 1;
        this.PageSize = 20;
        this.performanceList = [];
        this.loading = true;
        this.finished = false;
      },
    },
    components: {
      Datetime
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .performance-detail
    wh(100%, 100%)
    background: #F5F5F5
    .performance-select-con
      position: fixed
      top: 0
      wh(100%, 1.2rem)
      z-index: 99
      .date-box
        fj(center, center)
        wh(100%, 1.2rem)
        background: rgba(60, 175, 255, 1)
        .date-con
          fj(center, center)
          .pic1
            wh(0.4rem, 0.4rem)
          .date-time
            padding-right: 0.32rem
            padding-left: 0.32rem
            size-color(0.427rem, rgba(255, 255, 255, 1))
          .date-time >>> .vux-cell-value
            size-color(0.507rem, rgba(255, 255, 255, 1))
          .pic2
            wh(0.4rem, 0.4rem)
    .performance-content
      display: flex
      flex-direction: column
      position: absolute
      top: 1.2rem
      wh(100%, auto)
      .performance-total
        display: flex
        align-items: center
        wh(100%, 0.8rem)
        .total-text
          margin-left: auto
          margin-right: 0.32rem
          font-size: 0.373rem
          color: rgba(102, 102, 102, 1)
      .performance-item
        wh(100%, 1.333rem)
        display: flex
        align-items: center
        background: #fff
        border-bottom: 0.027rem solid #f5f5f5
        .month-text
          padding-left: 0.32rem
          font-size: 0.4rem
          color: rgba(51, 51, 51, 1)
        .people
          margin-left: auto
          margin-right: 0.32rem
          font-size: 0.427rem
          color: rgba(60, 175, 255, 1)
    .work-mask_transparent-toast
      position: fixed
      z-index: 1000
      top: 0
      right: 0
      left: 0
      bottom: 0
    .empty-wrap
      fj(center, center)
      wh(100%, auto)
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
